<template>
  <div id="UserCenterCollect">
    <div class="title">
      <span class="iconfont icon-shoucang"></span>
      我的收藏
    </div>
    <div class="collect-list">
      <el-tabs v-model="listQuery.collectType" type="card" @tab-click="handleClick">
        <el-tab-pane label="书籍收藏" name="1"></el-tab-pane>
        <el-tab-pane label="文章收藏" name="2"></el-tab-pane>

        <div>
          <div class="clearfix all-sel">
            <div class="fl">
              <el-checkbox v-model="checkAll" @change="handleCheckAllChange">批量选择</el-checkbox>
            </div>
            <div class="fl b1" @click="handleDownloadAll(1)" v-if="listQuery.collectType==1">下载</div>
            <div class="fl b1" @click="handleDownload(1)" v-else>下载</div>
            <div class="fl b2" @click="setCollect(2)">取消收藏</div>
            <div class="fr b3">
              共
              <i>{{ pageObj.count }}</i> 期
            </div>
          </div>
          <div class="issue-list-box">
            <div class="list-box-ul">
              <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                <el-row :gutter="20" style="margin: 0" v-if="listQuery.collectType == 1">
                  <el-col :span="6" v-for="v in tableData" :key="v.id">
                    <div class="y-periodical-item">
                      <p class="star"></p>
                      <el-checkbox :label="v.id"></el-checkbox>
                      <img :src="coverJournalImg(v.sysJournal)" @click="toperiodicalList(v)" alt />
                      <p
                        v-if="v.sysJournal"
                        class="list-title one-ellipsis"
                        @click="toperiodicalList(v)"
                      >{{ v.sysJournal.name }}</p>
                      <p class="clearfix through">
                        <span class="fl">
                          <el-button
                            size="mini"
                            icon="el-icon-download"
                            @click="handleDownloadAll(2,v)"
                          >下载</el-button>
                        </span>
                        <span class="fr">
                          <el-button
                            size="mini"
                            icon="el-icon-star-on"
                            @click="setCollect(1, v.id)"
                          >取消收藏</el-button>
                        </span>
                      </p>
                    </div>
                  </el-col>
                </el-row>
                <div class="c-article-wrap" v-else>
                  <div class="list-item" v-for="v in tableData" :key="v.id">
                    <div class="list-top clearfix">
                      <div class="list-title two-ellipsis fl">
                        <el-checkbox :label="v.id"></el-checkbox>
                        <p @click="topArticle(v)">{{ v.sysNewsContents.title }}</p>
                      </div>
                      <div class="list-author two-ellipsis fr">
                        {{
                        v.sysNewsContents.author
                        }}
                      </div>
                    </div>

                    <div class="clearfix list-bot">
                      <p
                       v-if="v.sysNewsContents.classifyNames"
                        class="fl name1"
                      >栏目：{{v.sysNewsContents.classifyNames?v.sysNewsContents.classifyNames:'--'}}</p>
                      <p class="fl name2" v-if="v.sysNewsContents.executiveEditor">
                        责任编辑：{{
                        v.sysNewsContents.executiveEditor
                        ? v.sysNewsContents.executiveEditor
                        : '--'
                        }}
                      </p>
                      <p class="fr ico-li">
                        <span class="fl">
                          <el-button
                            size="mini"
                            icon="el-icon-download"
                            @click.stop="handleDownload(2,v)"
                          >下载</el-button>
                        </span>
                        <span class="fr">
                          <el-button
                            size="mini"
                            icon="el-icon-star-on"
                            @click.stop="setCollect(1, v.id)"
                          >取消收藏</el-button>
                        </span>
                      </p>
                    </div>
                  </div>
                </div>
              </el-checkbox-group>
            </div>
          </div>
          <Pagination
            v-show="parseInt(pageObj.count) > 0"
            :total="parseInt(pageObj.count)"
            @change="getList"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
          />
          <el-empty v-if="tableData.length == 0" description="暂无数据"></el-empty>
        </div>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import setInfo from '@/mixins/setInfo.js'
import columnJump from '@/mixins/columnJump'
import {
  sysJournalCollectQueryMy,
  sysJournalCollectDeleteBatch,
} from '@/api/home/sysJournalCollect'
import { sysJournalQueryPdfList } from '@/api/module/sysJournal'
import { openApiSysCourseQuery } from '@/api/openApi'
import { sysJournalCollectAdd } from '@/api/home/sysJournalCollect'
import downloadWaterMark from '@/mixins/downloadWaterMark'
export default {
  mixins: [setInfo, columnJump, downloadWaterMark],
  data() {
    return {
      pageObj: {},
      tableData: [],
      listQuery: {
        page: 1,
        limit: 8,
        collectType: '1',
        opt: 'collect',
      },
      flag: true,
      checkAll: false,
      checkedCities: [],
      cities: [],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      sysJournalCollectQueryMy(this.listQuery).then((res) => {
        this.tableData = res.data.data
        this.pageObj = res.data
      })
    },
    handleClick(tab, event) {
      this.listQuery.page = 1
      this.tableData = []
      this.getList()
    },
    //全选列表
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.tableData.map((v) => v.id) : []
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.tableData.length
    },

    //删除确认
    setRemoveCollect(row) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delete(row)
        })
        .catch(() => {})
    },
    //删除
    delete(row) {
      sysConcernedLogDelete(row.sysConcernedId).then((res) => {
        this.getList()
        this.$message({
          message: '删除成功',
          type: 'success',
        })
      })
    },
    setCollect(type, id) {
      //1是单个 2是批量

      if (this.checkedCities.length == 0 && !id) {
        this.$message({
          message: '请选择需要取消的收藏！',
          type: 'warning',
        })
        return false
      }
      this.loading = true
      var json = {
        ids: [],
      }
      if (type == 2) {
        var list = this.checkedCities
        json.ids = list
      } else {
        json.ids = [id]
      }

      sysJournalCollectDeleteBatch(json.ids).then((res) => {
        this.$message({
          message: '取消成功',
          type: 'success',
        })
        this.getList()
        this.loading = false
      })
    },
    toperiodicalList(row) {
      this.setSession('navTab', 95)
      this.setSession('homeJournal', JSON.stringify(row.sysJournal))
      this.$store.commit('setHomeJournal', row.sysJournal)
      this.$router.push({
        name: 'periodical-center',
        query: {
          id: row.resId,
        },
      })
    },
    topArticle(row) {
      this.setSession('navTab', 95)
      this.setSession('homeArticle', JSON.stringify(row.sysNewsContents))
      this.$store.commit('setHomeArticle', row.sysNewsContents)
      this.$router.push({
        name: 'pArticle',
        query: {
          id: row.resId,
        },
      })
    },
    //下载整本
    handleDownloadAll(type, item) {
      if (this.checkedCities.length == 0 && type == 1) {
        this.$message({
          message: '请选择需要下载的书籍',
          type: 'warning',
        })
        return false
      }
      if (type == 2) {
        this.handleDownloadBook(item)
        return false
      } else {
        //  this.checkedCities.forEach(v => {
        //      this.loading=true;
        //     sysJournalQueryPdfList(v).then((res) => {

        //         this.downloadZip(res.data.data, this.getNames(v))
        //          this.loading=false;
        //     })
        // });
        let journalList = this.tableData.filter((v) =>
          this.checkedCities.includes(v.id),
        )
        if (journalList.length == 0) {
          this.warnMsg('请选择需要下载的书籍')
          return
        }
        this.handleDownloadMoreBook(journalList)
      }
    },
    getNames(v) {
      var name = ''
      this.tableData.forEach((e) => {
        if (e.id == v) {
          name = e.name
        }
      })
      return name
    },
    handleDownload(type, item) {
      //type 1 批量 2单本
      if (this.checkedCities.length == 0 && type == 1) {
        this.$message({
          message: '请选择需要下载的文章',
          type: 'warning',
        })
        return false
      }

      if (type == 1) {
        let journalList = this.tableData.filter((v) =>
          this.checkedCities.includes(v.id),
        )
        journalList.forEach((v) => {
          this.downloadOne(v.sysNewsContents)
        })
      } else {
        this.downloadOne(item.sysNewsContents)
        // if (!item.sysNewsContents.hasOwnProperty('fileList') || item.sysNewsContents.fileList.length == 0) {
        //   this.$message({
        //     message: '暂无可下载数据',
        //     type: 'warning',
        //   })
        //   return false
        // }
        // sysJournalCollectAdd({
        //   resId: item.id,
        //   opt: 'download',
        //   collectType: 2,
        // }).then((res) => {})
        // item.sysNewsContents.fileList.forEach((item) => {
        //   this.downloadOne(item)
        // })
      }
    },
  },
}
</script>
<style scoped lang="scss">
#UserCenterCollect {
  width: 100%;
  min-height: 500px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  font-size: 14px;
  .title {
    color: #333;
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    background-color: #faf3f3;
    span {
      color: #ed9420;
      margin-left: 30px;
      margin-right: 10px;
      font-size: 24px;
    }
  }
  .all-sel {
    text-align: left;
    height: 56px;
    line-height: 56px;
    cursor: pointer;
    .b1 {
      margin-left: 40px;
      color: #043183;
    }
    .b2 {
      margin-left: 24px;
      color: #043183;
    }
    .b3 {
      i {
        color: #ff7b07;
      }
    }
  }
  .list-box-ul {
    .y-periodical-item {
      cursor: pointer;
      position: relative;
      img {
        width: 100%;
        margin-top: 10px;
        height: 292px;
      }
      .list-title {
        font-size: 18px;
        text-align: center;
        margin-bottom: 10px;
      }
      .through {
        padding-bottom: 15px;
        i {
          display: inline-block;
          font-size: 18px;
          line-height: 28px;
        }
      }
      .star {
        width: 48px;
        height: 48px;
        background: url(../../../assets/homes/i.png) 100% no-repeat;
        position: absolute;
        right: 8px;
        top: 15px;
      }
      label.el-checkbox {
        position: absolute;
        left: 0px;
        top: 10px;
        width: 30px;
        height: 30px;
        background: #fff;

        box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
      }
    }
    .y-periodical-item:hover {
      background: #fff;

      p {
        // color: #fff;
      }
    }
    .el-col.el-col-6 {
      border: 1px solid #f1f1f1;
      margin-bottom: 16px;
    }
    .el-col.el-col-6:hover {
      background: #f2f2f2;
      .y-periodical-item {
        background: #f2f2f2;
      }
    }
  }
  .collect-list {
    padding: 20px 30px;
    .category-labels {
      position: absolute;
      left: 0;
      top: 9px;
      background: #d7d140;
      color: #fff;
      padding: 1px 10px;
      z-index: 2;
      border-radius: 0 50px 50px 0;
      font-size: 16px;
      font-weight: 900;
    }
    .c-article-wrap {
      border-top: 1px solid #ddd;
    }
    .list-item {
      position: relative;
      border-bottom: 1px solid #ddd;
      p.one-ellipsis {
        line-height: normal;
        margin-top: 5px;
      }
      .category-name {
        font-size: 16px;
        font-weight: 900;
      }
      .el-icon-delete {
        position: absolute;
        right: 4px;
        bottom: 8px;
        z-index: 99;
        font-size: 16px;
      }
    }
    .list-item:hover {
      background: #f7f7f7;
    }
  }
  .category-img {
    border-radius: 10px;
    border: 1px solid #eee;
  }
  .category-img img {
    width: 100%;
    height: 170px;
    border-radius: 10px;
    display: block;
  }
  p.collect-date {
    font-size: 12px;
    color: #979494;
  }
  .el-row-div {
    cursor: pointer;
  }
  .list-top {
    cursor: pointer;
    padding-top: 20px;
    .list-title {
      width: 75%;

      font-size: 18px;

      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
      position: relative;
      .el-checkbox{
        position: absolute;
    }
    p{
        margin-left: 30px;
    }
    }
    .list-author {
      width: 22%;
      text-align: right;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
    }
  }
  .list-top:hover div {
    color: #043183;
  }
  .name1,
  .name2 {
    margin-right: 32px;
    color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }
  .ico-li {
    color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    span {
      margin-left: 20px;
      i {
        font-weight: 900;
        margin-right: 4px;
      }
    }
  }
  .clearfix.list-bot {
    padding: 10px 0;
  }
}
</style>
<style scoped>
.collect-list .through >>> i {
  font-size: 18px;
  vertical-align: -2px;
}
.y-periodical-item >>> .el-checkbox__label {
  color: transparent;
}
.collect-list >>> .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #043183;
  border-color: #043183;
}
.collect-list .y-periodical-item >>> .el-checkbox__input {
  margin-left: 7px;
}
.collect-list
  .list-title.two-ellipsis.fl
  >>> .el-checkbox__input.is-checked
  + .el-checkbox__label {
  color: transparent;
}
.collect-list .list-title.two-ellipsis.fl >>> .el-checkbox__label {
  color: transparent;
}
.collect-list .el-checkbox-group {
  font-size: 14px;
}
.collect-list button.el-button i {
  font-size: 16px;
  vertical-align: -1px;
}
.el-button:focus,
.el-button:hover {
  background-color: #043183;
  border-color: #043183;
  color: #fff;
}
</style>